<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title> 钢琴演奏 </title>
		<style type="text/css">
			
			html
			{
				height: 100%;
			}
			body
			{
				width: 100%;
				height: 100%;
				margin: 0;
				background-color: black;
				display: flex;
				justify-content: center;
				align-items: center;				
			}
			main
			{
				width: 800px;
				height: 400px;
				box-sizing: border-box;
				border: 18px solid #666666;
				border-top: 30px solid #666666;
				border-radius: 15px;
				box-shadow: 0 0 25px #fff;
				background-image: url(keys.png);
				background-size: 100% 100%;
				/*overflow: hidden;*/
				display: flex;
			}
			div
			{
				height: 100%;
				flex-grow: 1;
			}
			div:active{
                background: linear-gradient(rgba(255, 255, 255, 0),rgba(150, 150, 150, 0.5));
        	}
        	.down{
                background: linear-gradient(rgba(255, 255, 255, 0),rgba(150, 150, 150, 0.5));
        	}
			
		</style>
	</head>
	<body>
		
		
		<main>
			
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			
		</main>

		<audio src="notes/1.oga"></audio>
		<audio src="notes/2.oga"></audio>
		<audio src="notes/3.oga"></audio>
		<audio src="notes/4.oga"></audio>
		<audio src="notes/5.oga"></audio>
		<audio src="notes/6.oga"></audio>
		<audio src="notes/7.oga"></audio>
		<audio src="notes/8.oga"></audio>
		<audio src="notes/9.oga"></audio>
		
		
		<script type="text/javascript">
		
			var div = document.querySelectorAll('div');
			var audio = document.querySelectorAll('audio');
			var code = 0;
			
			window.onload = function(){
				
				
				for(var i = 0; i < div.length;i++){
					div[i].index = i;
					div[i].onmousedown = function(){
						audio[this.index].load();
						audio[this.index].play();
						this.classname = 'down'
					}
				}	
			}
			
			
		  window.onkeydown = function(ev){	
			var key = ev.keyCode
    		console.log(key)
    		if (code != key) {
        		code = key
        		if (code>=49 && code<=57) {
        			audio[(code-49)].load();
            		audio[(code-49)].play();
            		div[code-49].classList.add('down')
        		}
    		}
					
		  }
				
			window.onkeyup = function () {
    			code = 0
    			for(var i = 0; i < div.length;i++)
    			div[i].classList.remove('down')
			}
			
			
			
		</script>
		
	</body>
</html>
